<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>演示</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="/src/scripts/jquery.form.plus.js"></script>

    <style type="text/css">
        .page-view {
            margin: 100px
        }
    </style>
</head>

<body>
    <div class="page-view">
        <div class="col-xs-6">

            <div class="panel">
                <div class="panel-heading">表单1 当你需要提交多个表单的时候
                </div>
                <div class="panel-body">
                    <div class="form" data-form-key="form1">
                        <div class="form-group">
                            <label>普通文本框</label>
                            <input type="text" class="form-control" data-form="name">
                        </div>
                        <div class="form-group">
                            <label>文本域</label>
                            <textarea class="form-control" data-form="textarea"></textarea>
                        </div>
                        <div class="form-group">
                            <label>图片 获取 src</label>
                            <div>
                                <img src="//img2.woyaogexing.com/2018/09/02/f60207a010204984b304c908a2f2e73c!400x400.jpeg"
                                    style="width:120px;border-radius:50%" data-form="img&src">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>选择框(普通value值)</label>
                            <select class="form-control" data-form="select">
                                <option>北京</option>
                                <option>上海</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>选择框(特性data-op值)</label>
                            <select class="form-control" data-form="SelectArrt&data-op">
                                <option data-op="1_北京">北京</option>
                                <option selected data-op="2_上海">上海</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>单选框</label>
                            <div class="checkbox">
                                <label>
                                    <input type="radio" name="r" value="撸啊撸" checked data-form="radio"><span> 撸啊撸</span>
                                </label>
                                <label><input type="radio" name="r" value="毒奶粉" data-form="radio"><span> 毒奶粉</span></label>
                                <label><input type="radio" name="r" value="守望屁股" data-form="radio"><span> 守望屁股</span></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>多选</label>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="ck" value="撸啊撸" checked data-form="checkbox"><span>
                                        撸啊撸</span>
                                </label>
                                <label><input type="checkbox" name="ck" value="毒奶粉" data-form="checkbox"><span> 毒奶粉</span></label>
                                <label><input type="checkbox" name="ck" value="守望屁股" data-form="checkbox"><span> 守望屁股</span></label>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="panel">
                <div class="panel-heading">表单2 当你需要提交多个表单的时候
                </div>
                <div class="panel-body">
                    <div class="form2" data-form-key="form2">
                        <div class="form-group">
                            <label>普通文本框</label>
                            <input type="text" class="form-control" data-form="name">
                        </div>
                        <div class="form-group">
                            <label>文本域</label>
                            <textarea class="form-control" data-form="textarea"></textarea>
                        </div>
                        <div class="form-group">
                            <label>选择框(普通value值)</label>
                            <select class="form-control" data-form="select">
                                <option>北京</option>
                                <option>上海</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>单选框</label>
                            <div class="checkbox">
                                <label>
                                    <input type="radio" name="r" value="撸啊撸" checked data-form="radio"><span> 撸啊撸</span>
                                </label>
                                <label><input type="radio" name="r" value="毒奶粉" data-form="radio"><span> 毒奶粉</span></label>
                                <label><input type="radio" name="r" value="守望屁股" data-form="radio"><span> 守望屁股</span></label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>多选</label>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="ck" value="撸啊撸" checked data-form="checkbox"><span>
                                        撸啊撸</span>
                                </label>
                                <label><input type="checkbox" name="ck" value="毒奶粉" data-form="checkbox"><span> 毒奶粉</span></label>
                                <label><input type="checkbox" name="ck" value="守望屁股" data-form="checkbox"><span> 守望屁股</span></label>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>




    </div>
    <div class="col-xs-6">
        <div class="panel">
            <div class="panel-heading">自动获取的JSON值
            </div>
            <div id="write" class="panel-body">

            </div>
            <div class="form-group" style="padding-left: 10px">
                <button type="button" id="btn-submit" class="btn btn-primary">获取单表1单提交</button>
                <button type="button" id="btn-submit-mu" class="btn btn-primary">多表单提交</button>
            </div>
        </div>
    </div>

</body>

</html>
<script>
    $(function () {
        //单表单提交
        $("#btn-submit").click(function () {
            $(".form").ajaxFormSubmit("", function (d) {

            }, {
                log: function (rs) {
                    $("#write").html(JSON.stringify(rs));
                },
                addData: {
                    addData: "我是js addData参数追加的值"
                }
            })
        });

        //多表单提交 在 表单容器 加上 data-from-key 会自动组装
        $("#btn-submit-mu").click(function () {
            $("div[data-form-key]").ajaxFormSubmit("", function (d) {

            }, {
                log: function (rs) {
                    $("#write").html(JSON.stringify(rs));
                }
            })
        })
    })
</script>